$theme-color: #2879ff;
$theme-color--active: rgba($theme-color, 0.7);
$theme-color--start: #3885fe;
$theme-color--end: #70a3f7;
$theme-color--gradient: linear-gradient(90deg, $theme-color--start, $theme-color--end);

$after-color: #ffc13d;
$after-color--start: #fcc54e;
$after-color--end: #ffd375;

$bs-themeColor: #10c48c;
$bs-theme-color: #10c48c;
$bs-theme-color--start: #33c597;
$bs-theme-color--end: #7ed6bc;

$bs-after-color: #ffc13d;
$bs-after-color--start: #fcc54e;
$bs-after-color--end: #ffd375;

$disabled: #9ea1a5;
$black1: #121924;
$black2: #585e66;
$black3: #95989e;
$black-gold: #58573b;

$red: #f84b4c;
$wine: #d40e36;
$blue: #3390ff;
$green: #16dab2;
$orange: #f77119;
$skyblue: #00ccff;
$gold: #c89660;
$purple: #727eed;

$background-color: #f9fafe;
$background-sub-color: #f5f6f7;
$placeholder-color: #c5c5c5;
$line-color: #e8e8e8;
$date-color: #4a9cff;

$shadow-header: 0 4rpx 30rpx -10rpx rgba(0, 0, 0, 0.05);
$shadow: 0 0 20rpx -5rpx rgba(0, 0, 0, 0.1);
$shadow2: 0 0 16rpx -4rpx rgba(0, 0, 0, 0.1);
$shadow-item: 0 4rpx 30rpx -10rpx rgba(0, 0, 0, 0.05);

%clear-float {
    &:after {
        display: block;
        content: 'clear';
        height: 0;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }
}

@mixin item-btn($colorStart: $theme-color--start, $colorEnd: $theme-color--end) {
    color: #fff;
    padding: 10rpx 8rpx;
    font-size: 24rpx;
    font-weight: bold;
    width: 100rpx;
    border-radius: 16rpx;
    text-align: center;
    background: linear-gradient(90deg, $colorStart, $colorEnd);
    box-shadow: 0 0.15rem 0.3rem rgba($colorStart, 0.2);
}

@mixin line($line: 1) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    overflow: hidden;
    word-break: break-all;
}

$scales: 1, 0.5, 0.33333;

@mixin border-top($left: 0, $right: 0, $style: solid, $color: $line-color, $position: before, $z-index: 0) {
    position: relative;

    @for $i from 1 through 3 {
        @media (-webkit-min-device-pixel-ratio: $i) {
            &::#{$position} {
                content: ' ';
                position: absolute;
                top: 0;
                left: $left;
                right: $right;
                z-index: $z-index;
                border-top: 1px $style $color;
                transform-origin: 0 0;
                transform: scaleY(nth($scales, $i));
            }
        }
    }
}

@mixin border-bottom($left: 0, $right: 0, $color: $line-color, $position: after, $z-index: 0) {
    position: relative;

    @for $i from 1 through 3 {
        @media (-webkit-min-device-pixel-ratio: $i) {
            &::#{$position} {
                content: ' ';
                position: absolute;
                bottom: 0;
                left: $left;
                right: $right;
                z-index: $z-index;
                border-bottom: 1px solid $color;
                transform-origin: 0 100%;
                transform: scaleY(nth($scales, $i));
            }
        }
    }
}

@mixin border-left($top: 0, $bottom: 0, $color: $line-color, $position: before, $z-index: 0) {
    position: relative;

    @for $i from 1 through 3 {
        @media (-webkit-min-device-pixel-ratio: $i) {
            &::#{$position} {
                content: ' ';
                position: absolute;
                left: 0;
                top: $top;
                bottom: $bottom;
                z-index: $z-index;
                border-left: 1px solid $color;
                transform-origin: 0 0;
                transform: scaleX(nth($scales, $i));
            }
        }
    }
}

@mixin border-right($top: 0, $bottom: 0, $color: $line-color, $position: after, $z-index: 0) {
    position: relative;

    @for $i from 1 through 3 {
        @media (-webkit-min-device-pixel-ratio: $i) {
            &::#{$position} {
                content: ' ';
                position: absolute;
                right: 0;
                top: $top;
                bottom: $bottom;
                z-index: $z-index;
                border-right: 1px solid $color;
                transform-origin: 100% 0;
                transform: scaleX(nth($scales, $i));
            }
        }
    }
}

@mixin border($radius: 0rpx, $color: $line-color, $position: before, $z-index: 0) {
    position: relative;
    border-radius: $radius;

    @for $i from 1 through 3 {
        @media (-webkit-min-device-pixel-ratio: $i) {
            &::#{$position} {
                content: ' ';
                position: absolute;
                left: 0;
                top: 0;
                z-index: $z-index;
                width: 100% * $i;
                height: 100% * $i;
                border: 1px solid $color;
                transform-origin: 0 0;
                transform: scale(nth($scales, $i));
                border-radius: $radius * $i;
                box-sizing: border-box;
            }
        }
    }
}
